<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>孕育宝典 - 经期日历</title>
        <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
        <style>
            body {
                font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
                background-color: #f5f5f5;
                color: #333333;
                margin: 0;
                padding: 0;
            }
            .device-container {
                width: 390px;
                height: 844px;
                overflow: hidden;
                position: relative;
                background-color: #ffffff;
            }
            .status-bar {
                height: 44px;
                background-color: #ffffff;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 20px;
                font-size: 14px;
                font-weight: 600;
            }
            .header {
                background-color: #ffffff;
                padding: 12px 16px 8px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid #f0f0f0;
            }
            .nav-bar {
                height: 60px;
                background-color: #ffffff;
                position: absolute;
                bottom: 0;
                width: 100%;
                display: flex;
                justify-content: space-around;
                align-items: center;
                border-top: 1px solid #f0f0f0;
            }
            .nav-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                color: #666666;
                font-size: 10px;
            }
            .nav-item.active {
                color: #ff9fb5;
            }
            .main-content {
                height: calc(844px - 44px - 60px - 56px);
                overflow-y: auto;
                padding-bottom: 16px;
            }
            .month-selector {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 16px;
                background-color: #fff;
                border-bottom: 1px solid #f0f0f0;
            }
            .month-title {
                font-size: 18px;
                font-weight: 600;
                color: #333;
            }
            .month-nav {
                display: flex;
                gap: 16px;
                align-items: center;
            }
            .month-nav-btn {
                width: 28px;
                height: 28px;
                border-radius: 14px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #f5f5f5;
                color: #666;
            }
            .calendar {
                padding: 12px 16px;
                background-color: #fff;
            }
            .weekdays {
                display: grid;
                grid-template-columns: repeat(7, 1fr);
                text-align: center;
                font-size: 12px;
                color: #999;
                padding-bottom: 8px;
            }
            .days {
                display: grid;
                grid-template-columns: repeat(7, 1fr);
                grid-template-rows: repeat(6, auto);
                gap: 2px;
            }
            .day {
                height: 50px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                font-size: 14px;
                color: #333;
                position: relative;
            }
            .day.inactive {
                color: #ccc;
            }
            .day.today {
                font-weight: bold;
            }
            .day-inner {
                width: 30px;
                height: 30px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 15px;
            }
            .day-period {
                background-color: #ff9fb5;
                color: white;
            }
            .day-ovulation {
                background-color: #ffb74d;
                color: white;
            }
            .day-fertile {
                background-color: #fff8e1;
                color: #ffb74d;
            }
            .day-period-predicted {
                border: 1px dashed #ff9fb5;
                color: #ff9fb5;
            }
            .day-dot {
                position: absolute;
                bottom: 2px;
                width: 4px;
                height: 4px;
                border-radius: 2px;
            }
            .dot-pain {
                background-color: #f44336;
                left: calc(50% - 6px);
            }
            .dot-mood {
                background-color: #ba68c8;
                left: calc(50%);
            }
            .dot-note {
                background-color: #64b5f6;
                left: calc(50% + 6px);
            }
            .cycle-info-card {
                background-color: #fff;
                margin: 12px 16px;
                border-radius: 12px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
                overflow: hidden;
            }
            .cycle-card-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 12px 16px;
                border-bottom: 1px solid #f5f5f5;
            }
            .cycle-card-title {
                font-size: 15px;
                font-weight: 600;
                color: #333;
            }
            .cycle-card-more {
                font-size: 13px;
                color: #999;
            }
            .cycle-data {
                display: flex;
                padding: 16px;
            }
            .cycle-data-item {
                flex: 1;
                text-align: center;
                padding: 0 8px;
                position: relative;
            }
            .cycle-data-item:not(:last-child):after {
                content: '';
                position: absolute;
                right: 0;
                top: 10%;
                height: 80%;
                width: 1px;
                background-color: #f0f0f0;
            }
            .cycle-data-value {
                font-size: 18px;
                font-weight: 600;
                color: #333;
                margin-bottom: 4px;
            }
            .cycle-data-label {
                font-size: 12px;
                color: #999;
            }
            .legend {
                display: flex;
                flex-wrap: wrap;
                gap: 12px;
                padding: 12px 16px;
                background-color: #fff;
                margin-top: 12px;
            }
            .legend-item {
                display: flex;
                align-items: center;
                font-size: 12px;
                color: #666;
            }
            .legend-color {
                width: 12px;
                height: 12px;
                border-radius: 6px;
                margin-right: 4px;
            }
            .color-period {
                background-color: #ff9fb5;
            }
            .color-ovulation {
                background-color: #ffb74d;
            }
            .color-fertile {
                background-color: #fff8e1;
                border: 1px solid #ffb74d;
            }
            .color-predicted {
                border: 1px dashed #ff9fb5;
                background-color: white;
            }
            .color-today {
                background-color: white;
                border: 2px solid #333;
            }
            .stats-card {
                background-color: #fff;
                margin: 12px 16px;
                border-radius: 12px;
                padding: 16px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            }
            .stats-title {
                font-size: 15px;
                font-weight: 600;
                color: #333;
                margin-bottom: 16px;
            }
            .stats-row {
                display: flex;
                margin-bottom: 8px;
            }
            .stats-row:last-child {
                margin-bottom: 0;
            }
            .stats-label {
                flex: 1;
                font-size: 14px;
                color: #666;
            }
            .stats-value {
                font-size: 14px;
                font-weight: 500;
                color: #333;
            }
            .stats-bar-container {
                flex: 2;
                height: 8px;
                background-color: #f0f0f0;
                border-radius: 4px;
                margin-top: 6px;
                overflow: hidden;
                position: relative;
            }
            .stats-bar {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                background-color: #ff9fb5;
                border-radius: 4px;
            }
            .quick-actions {
                display: flex;
                gap: 10px;
                padding: 16px;
                background-color: #fff;
                border-bottom: 1px solid #f0f0f0;
            }
            .action-btn {
                flex: 1;
                background-color: #f5f5f5;
                border-radius: 8px;
                padding: 10px 0;
                display: flex;
                flex-direction: column;
                align-items: center;
                font-size: 12px;
                color: #666;
            }
            .action-btn i {
                font-size: 18px;
                margin-bottom: 4px;
                color: #ff9fb5;
            }
            .fab-button {
                position: fixed;
                right: 20px;
                bottom: 76px;
                width: 56px;
                height: 56px;
                border-radius: 28px;
                background-color: #ff9fb5;
                color: white;
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: 0 2px 10px rgba(255, 159, 181, 0.4);
                z-index: 10;
            }
            .fab-button i {
                font-size: 24px;
            }
            
            /* 排卵状态卡片样式 */
            .status-card {
                background-color: #ffffff;
                padding: 24px 16px;
                border-radius: 12px;
                margin: 12px 16px;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            }
            .status-header {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                margin-bottom: 16px;
            }
            .status-title {
                font-size: 18px;
                font-weight: 600;
                color: #333;
            }
            .status-share {
                display: flex;
                align-items: center;
                gap: 8px;
                color: #999;
                font-size: 14px;
            }
            .status-date {
                color: #999;
                font-size: 14px;
                margin-top: 4px;
            }
            .ovulation-status {
                display: flex;
                align-items: center;
                margin-top: 12px;
            }
            .ovulation-icon {
                width: 50px;
                height: 50px;
                border-radius: 25px;
                background-color: #fff8e1;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 16px;
            }
            .ovulation-icon i {
                font-size: 24px;
                color: #ffb74d;
            }
            .ovulation-info {
                flex: 1;
            }
            .ovulation-day {
                font-size: 22px;
                font-weight: 700;
                color: #333;
                margin-bottom: 6px;
            }
            .ovulation-date {
                font-size: 18px;
                font-weight: 600;
                color: #ff9fb5;
            }
            .ovulation-desc {
                font-size: 18px;
                font-weight: 600;
                color: #ff9fb5;
            }
            .ovulation-countdown {
                display: flex;
                align-items: center;
                margin-top: 16px;
            }
            .countdown-number {
                font-size: 28px;
                font-weight: 700;
                color: #ff9fb5;
                margin-right: 8px;
            }
            .countdown-label {
                font-size: 14px;
                color: #666;
            }
            .cycle-progress-bar {
                height: 8px;
                background-color: #f0f0f0;
                border-radius: 4px;
                margin-top: 20px;
                position: relative;
                overflow: hidden;
            }
            .progress-fill {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                background-color: #ffb74d;
                border-radius: 4px;
            }
            .progress-marker {
                position: absolute;
                top: -2px;
                width: 12px;
                height: 12px;
                border-radius: 6px;
                background-color: #ffb74d;
                transform: translateX(-50%);
            }
            .progress-marker.current {
                background-color: #ff9fb5;
            }
            .progress-labels {
                display: flex;
                justify-content: space-between;
                margin-top: 8px;
                font-size: 12px;
                color: #999;
            }
            .progress-label.highlight {
                color: #ff9fb5;
                font-weight: 500;
            }
            
            /* 周期预测卡片样式 */
            .prediction-card {
                background-color: #ffffff;
                border-radius: 12px;
                margin: 0 16px 12px;
                padding: 16px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            }
            .prediction-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 16px;
            }
            .prediction-title {
                font-size: 16px;
                font-weight: 600;
                color: #333;
            }
            .prediction-toggle {
                display: flex;
                align-items: center;
                font-size: 13px;
                color: #666;
            }
            .prediction-toggle-switch {
                position: relative;
                display: inline-block;
                width: 40px;
                height: 20px;
                margin-left: 8px;
            }
            .prediction-toggle-switch input {
                opacity: 0;
                width: 0;
                height: 0;
            }
            .prediction-toggle-slider {
                position: absolute;
                cursor: pointer;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: #ccc;
                border-radius: 10px;
                transition: 0.4s;
            }
            .prediction-toggle-slider:before {
                position: absolute;
                content: '';
                height: 16px;
                width: 16px;
                left: 2px;
                bottom: 2px;
                background-color: white;
                border-radius: 50%;
                transition: 0.4s;
            }
            input:checked + .prediction-toggle-slider {
                background-color: #ff9fb5;
            }
            input:checked + .prediction-toggle-slider:before {
                transform: translateX(20px);
            }
            .prediction-dates {
                display: flex;
                gap: 10px;
                margin-top: 12px;
            }
            .prediction-date-item {
                flex: 1;
                background-color: #f9f9f9;
                border-radius: 8px;
                padding: 12px;
                text-align: center;
            }
            .prediction-date-label {
                font-size: 13px;
                color: #666;
                margin-bottom: 6px;
            }
            .prediction-date-value {
                font-size: 15px;
                font-weight: 600;
                color: #333;
            }
            .prediction-date-item.highlight {
                background-color: #fff8e1;
            }
            .prediction-date-item.highlight .prediction-date-label {
                color: #ffb74d;
            }
            .prediction-date-item.highlight .prediction-date-value {
                color: #f57c00;
            }
            .fertile-period {
                display: flex;
                margin-top: 16px;
                padding: 12px;
                background-color: #f0f8ff;
                border-radius: 8px;
            }
            .fertile-icon {
                width: 40px;
                height: 40px;
                border-radius: 20px;
                background-color: #e3f2fd;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 12px;
                color: #2196f3;
                font-size: 20px;
            }
            .fertile-info {
                flex: 1;
            }
            .fertile-title {
                font-size: 14px;
                font-weight: 500;
                color: #2196f3;
                margin-bottom: 4px;
            }
            .fertile-desc {
                font-size: 13px;
                color: #666;
            }
            
            /* 备孕小贴士样式 */
            .tips-card {
                background-color: #ffffff;
                border-radius: 12px;
                margin: 0 16px 12px;
                padding: 16px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            }
            .tips-header {
                font-size: 16px;
                font-weight: 600;
                color: #333;
                margin-bottom: 12px;
            }
            .tips-item {
                display: flex;
                margin-bottom: 12px;
                padding-bottom: 12px;
                border-bottom: 1px solid #f0f0f0;
            }
            .tips-item:last-child {
                margin-bottom: 0;
                padding-bottom: 0;
                border-bottom: none;
            }
            .tips-icon {
                width: 32px;
                height: 32px;
                border-radius: 16px;
                background-color: #f9f9f9;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 12px;
                color: #ff9fb5;
            }
            .tips-content {
                flex: 1;
            }
            .tips-title {
                font-size: 14px;
                font-weight: 500;
                color: #333;
                margin-bottom: 4px;
            }
            .tips-desc {
                font-size: 13px;
                color: #666;
            }
            
            /* 强化视觉层级的新样式 */
            .cycle-stats {
                display: flex;
                margin-top: 16px;
                padding-top: 16px;
                border-top: 1px solid #f0f0f0;
            }
            .cycle-stat-item {
                flex: 1;
                text-align: center;
            }
            .cycle-stat-value {
                font-size: 16px;
                font-weight: 600;
                color: #333;
            }
            .cycle-stat-label {
                font-size: 12px;
                color: #999;
                margin-top: 2px;
            }
            .collapsible {
                overflow: hidden;
                transition: max-height 0.3s ease;
            }
            .collapsible-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                cursor: pointer;
            }
            .collapsible-header i {
                transition: transform 0.3s ease;
            }
            .collapsible-header.active i {
                transform: rotate(180deg);
            }
            .expanded-calendar {
                height: 340px;
            }
        </style>
    </head>
    <body>
        <div class="device-container">
            <!-- iOS状态栏 -->
            <div class="status-bar">
                <span>9:41</span>
                <div class="flex items-center">
                    <i class="fas fa-signal mr-1"></i>
                    <i class="fas fa-wifi mr-1"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>

            <!-- 简化的页面头部 -->
            <div class="header">
                <div class="flex items-center">
                    <i class="fas fa-arrow-left mr-4"></i>
                    <h1 class="text-lg font-medium">经期日历</h1>
                </div>
            </div>

            <!-- 主内容区 -->
            <div class="main-content">
                <!-- 排卵状态卡片 -->
                <div class="status-card">
                    <div class="status-header">
                        <div>
                            <div class="status-title">排卵日预测</div>
                            <div class="status-date">基于您最近6个月的月经周期</div>
                        </div>
                    </div>

                    <div class="ovulation-status">
                        <div class="ovulation-icon">
                            <i class="fas fa-venus"></i>
                        </div>
                        <div class="ovulation-info">
                            <div class="ovulation-day">下次排卵日</div>
                            <div class="ovulation-date">2023-07-15</div>
                        </div>
                    </div>
                    
                    <div class="ovulation-countdown">
                        <div class="countdown-number">9</div>
                        <div class="countdown-label">天后</div>
                    </div>

                    <div class="cycle-progress-bar">
                        <div class="progress-fill" style="width: 45%"></div>
                        <div class="progress-marker" style="left: 20%"></div>
                        <div class="progress-marker current" style="left: 45%"></div>
                        <div class="progress-marker" style="left: 65%"></div>
                    </div>
                    <div class="progress-labels">
                        <div class="progress-label">月经期</div>
                        <div class="progress-label highlight">当前</div>
                        <div class="progress-label">排卵期</div>
                        <div class="progress-label">下次月经</div>
                    </div>
                    
                    <div class="cycle-stats">
                        <div class="cycle-stat-item">
                            <div class="cycle-stat-value">28天</div>
                            <div class="cycle-stat-label">平均周期</div>
                        </div>
                        <div class="cycle-stat-item">
                            <div class="cycle-stat-value">5天</div>
                            <div class="cycle-stat-label">平均经期</div>
                        </div>
                        <div class="cycle-stat-item">
                            <div class="cycle-stat-value">7/29</div>
                            <div class="cycle-stat-label">下次月经</div>
                        </div>
                    </div>
                </div>

                <!-- 月份选择器 -->
                <div class="month-selector">
                    <h2 class="month-title">2023年6月</h2>
                    <div class="month-nav">
                        <button class="month-nav-btn">
                            <i class="fas fa-chevron-left"></i>
                        </button>
                        <button class="month-nav-btn">
                            <i class="fas fa-chevron-right"></i>
                        </button>
                    </div>
                </div>

                <!-- 日历 -->
                <div class="calendar expanded-calendar">
                    <div class="weekdays">
                        <div>日</div>
                        <div>一</div>
                        <div>二</div>
                        <div>三</div>
                        <div>四</div>
                        <div>五</div>
                        <div>六</div>
                    </div>
                    <div class="days">
                        <!-- 上月日期 -->
                        <div class="day inactive">
                            <div class="day-inner">28</div>
                        </div>
                        <div class="day inactive">
                            <div class="day-inner">29</div>
                        </div>
                        <div class="day inactive">
                            <div class="day-inner">30</div>
                        </div>
                        <div class="day inactive">
                            <div class="day-inner">31</div>
                        </div>

                        <!-- 本月日期 -->
                        <div class="day">
                            <div class="day-inner day-period">1</div>
                            <div class="day-dot dot-pain"></div>
                        </div>
                        <div class="day">
                            <div class="day-inner day-period">2</div>
                            <div class="day-dot dot-mood"></div>
                        </div>
                        <div class="day">
                            <div class="day-inner day-period">3</div>
                        </div>

                        <div class="day">
                            <div class="day-inner day-period">4</div>
                        </div>
                        <div class="day">
                            <div class="day-inner day-period">5</div>
                        </div>
                        <div class="day">
                            <div class="day-inner">6</div>
                        </div>
                        <div class="day">
                            <div class="day-inner">7</div>
                        </div>
                        <div class="day">
                            <div class="day-inner">8</div>
                        </div>
                        <div class="day">
                            <div class="day-inner">9</div>
                        </div>
                        <div class="day">
                            <div class="day-inner">10</div>
                        </div>

                        <div class="day">
                            <div class="day-inner">11</div>
                        </div>
                        <div class="day">
                            <div class="day-inner">12</div>
                        </div>
                        <div class="day">
                            <div class="day-inner day-fertile">13</div>
                        </div>
                        <div class="day">
                            <div class="day-inner day-fertile">14</div>
                        </div>
                        <div class="day">
                            <div class="day-inner day-ovulation">15</div>
                            <div class="day-dot dot-note"></div>
                        </div>
                        <div class="day">
                            <div class="day-inner day-fertile">16</div>
                        </div>
                        <div class="day">
                            <div class="day-inner day-fertile">17</div>
                        </div>

                        <div class="day">
                            <div class="day-inner">18</div>
                        </div>
                        <div class="day">
                            <div class="day-inner">19</div>
                        </div>
                        <div class="day today">
                            <div class="day-inner">20</div>
                        </div>
                        <div class="day">
                            <div class="day-inner">21</div>
                        </div>
                        <div class="day">
                            <div class="day-inner">22</div>
                        </div>
                        <div class="day">
                            <div class="day-inner">23</div>
                        </div>
                        <div class="day">
                            <div class="day-inner">24</div>
                        </div>

                        <div class="day">
                            <div class="day-inner">25</div>
                        </div>
                        <div class="day">
                            <div class="day-inner">26</div>
                        </div>
                        <div class="day">
                            <div class="day-inner">27</div>
                        </div>
                        <div class="day">
                            <div class="day-inner">28</div>
                        </div>
                        <div class="day">
                            <div class="day-inner day-period-predicted">29</div>
                        </div>
                        <div class="day">
                            <div class="day-inner day-period-predicted">30</div>
                        </div>

                        <!-- 下月日期 -->
                        <div class="day inactive">
                            <div class="day-inner">1</div>
                        </div>

                        <div class="day inactive">
                            <div class="day-inner">2</div>
                        </div>
                        <div class="day inactive">
                            <div class="day-inner">3</div>
                        </div>
                        <div class="day inactive">
                            <div class="day-inner">4</div>
                        </div>
                        <div class="day inactive">
                            <div class="day-inner">5</div>
                        </div>
                        <div class="day inactive">
                            <div class="day-inner">6</div>
                        </div>
                        <div class="day inactive">
                            <div class="day-inner">7</div>
                        </div>
                        <div class="day inactive">
                            <div class="day-inner">8</div>
                        </div>
                    </div>
                </div>

                <!-- 简化的图例 -->
                <div class="legend">
                    <div class="legend-item">
                        <div class="legend-color color-period"></div>
                        <span>经期</span>
                    </div>
                    <div class="legend-item">
                        <div class="legend-color color-ovulation"></div>
                        <span>排卵日</span>
                    </div>
                    <div class="legend-item">
                        <div class="legend-color color-fertile"></div>
                        <span>易孕期</span>
                    </div>
                    <div class="legend-item">
                        <div class="legend-color color-predicted"></div>
                        <span>预测经期</span>
                    </div>
                </div>

                <!-- 简化后的周期预测卡片 - 可折叠设计 -->
                <div class="prediction-card">
                    <div class="collapsible-header">
                        <div class="prediction-title">易孕期详情</div>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    
                    <div class="collapsible" style="max-height: 0px;">
                        <div class="prediction-dates">
                            <div class="prediction-date-item">
                                <div class="prediction-date-label">上次月经</div>
                                <div class="prediction-date-value">6/1</div>
                            </div>
                            <div class="prediction-date-item highlight">
                                <div class="prediction-date-label">排卵日</div>
                                <div class="prediction-date-value">7/15</div>
                            </div>
                            <div class="prediction-date-item">
                                <div class="prediction-date-label">下次月经</div>
                                <div class="prediction-date-value">7/29</div>
                            </div>
                        </div>

                        <div class="fertile-period">
                            <div class="fertile-icon">
                                <i class="fas fa-calendar-check"></i>
                            </div>
                            <div class="fertile-info">
                                <div class="fertile-title">您的易孕期: 7/12 - 7/18</div>
                                <div class="fertile-desc">易孕期是指排卵日前后几天，这段时间同房受孕几率最高。</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 备孕小贴士卡片 - 可折叠设计 -->
                <div class="tips-card">
                    <div class="collapsible-header">
                        <div class="tips-header">备孕小贴士</div>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    
                    <div class="collapsible" style="max-height: 0px;">
                        <div class="tips-item">
                            <div class="tips-icon">
                                <i class="fas fa-thermometer-half"></i>
                            </div>
                            <div class="tips-content">
                                <div class="tips-title">坚持测量基础体温</div>
                                <div class="tips-desc">每天早晨醒来后、起床前测量，可更准确预测排卵期。</div>
                            </div>
                        </div>

                        <div class="tips-item">
                            <div class="tips-icon">
                                <i class="fas fa-tint"></i>
                            </div>
                            <div class="tips-content">
                                <div class="tips-title">留意宫颈粘液变化</div>
                                <div class="tips-desc">排卵期宫颈粘液通常增多且呈蛋清状，更有利于精子存活。</div>
                            </div>
                        </div>

                        <div class="tips-item">
                            <div class="tips-icon">
                                <i class="fas fa-heart"></i>
                            </div>
                            <div class="tips-content">
                                <div class="tips-title">把握最佳同房时机</div>
                                <div class="tips-desc">排卵前1-2天同房，受孕几率最高，每隔1-2天一次为宜。</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 增强的浮动按钮 -->
            <div class="fab-button">
                <i class="fas fa-plus"></i>
            </div>

            <!-- 底部导航栏 -->
            <div class="nav-bar">
                <div class="nav-item active">
                    <i class="fas fa-calendar-alt text-xl mb-1"></i>
                    <span>经期日历</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-notes-medical text-xl mb-1"></i>
                    <span>记录</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-user text-xl mb-1"></i>
                    <span>我的</span>
                </div>
            </div>
        </div>
        
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                // 初始化可折叠面板
                const collapsibleHeaders = document.querySelectorAll('.collapsible-header');
                
                collapsibleHeaders.forEach(header => {
                    header.addEventListener('click', function() {
                        const content = this.nextElementSibling;
                        const icon = this.querySelector('i');
                        
                        // 切换激活状态
                        this.classList.toggle('active');
                        
                        // 展开或收起内容
                        if (content.style.maxHeight === "0px") {
                            content.style.maxHeight = content.scrollHeight + "px";
                        } else {
                            content.style.maxHeight = "0px";
                        }
                    });
                });
            });
        </script>
    </body>
</html>
